<template>
	<view class="cont">
		<view 
			class="item u-p-l-24 u-p-r-24 u-m-t-24"
			v-for="(item, index) in list"
			:key="index">
			<view class="item-box bg-white radius12 u-p-24">
				<view class="u-flex u-row-between">
					<view class="u-light-color">申诉时间：2021-05-16 12:12</view>
					<view class="text-success">已退款</view>
				</view>
				<view class="u-font-28 text-bold u-m-t-24 u-p-t-24 u-border-top">
					购买【供暖400㎡+4立方】采购一台采购一台采购一台采购一台采购一台
				</view>
				<view class="u-flex u-row-between u-p-t-24 u-tips-color">
					<view>联系方式：15222222222</view>
					<view class="text-error">￥<text class="customFont u-font-36">38</text></view>
				</view>
				<view class="u-p-t-24 u-text-right">
					<u-button
						type="default" 
						size="mini" 
						shape="circle" 
						class="u-p-l-24 u-p-r-24"
						:custom-style="{height: '60rpx'}"
						@click="viewReason(item)">查看退款原因</u-button>
				</view>
			</view>
		</view>
		
		<!-- 数据为空 -->
		<empty
			:show="nodata"
			marginTop="100"
			text="还没有商品哦~"
			src="https://h5.dhcc.wang/images/O2Oplus/default_goods.png" />
		
		<!-- 加载更多 -->
		<u-loadmore
			v-if="!nodata"
			:status="loadstatus" 
			margin-top="30"
			margin-bottom="20"
			bg-color="#f8f8f8"/>
		
		<u-modal v-model="show" title="查看原因" :content="content"></u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			content: '',
			nodata: false,
			page: 1,
			pageSize: 10,
			loadstatus: 'loading', // 加载前值为loadmore，加载中为loading，没有数据为nomore
			list: []
		}
	},
	onLoad(options) {
		this.getList(true)
	},
	onReachBottom() {
		if (this.loadstatus == 'nomore') return
		this.getList()
	},
	methods: {
		getList(init = false) {
			this.loadstatus = 'loading'
			if (init) {
				this.page = 1
				this.nodata = false
			}
			// this.$api.getDemo({
			// 	page: this.page,
			// 	pageSize: this.pageSize
			// }, init).then(res => {
			// 	// 11111
			// })
			setTimeout(() => {
				if (init) this.list = []
				let list = [
					{
						title: '采购11111',
						status: 1
					},
					{
						title: '采购11111',
						status: 1
					},
					{
						title: '采购11111',
						status: 1
					},
					{
						title: '采购11111',
						status: 1
					},
					{
						title: '采购11111',
						status: 1
					},
					{
						title: '采购11111',
						status: 1
					},
					{
						title: '采购11111',
						status: 1
					},
					{
						title: '采购11111',
						status: 1
					},
					{
						title: '采购11111',
						status: 1
					},
					{
						title: '采购11111',
						status: 1
					}
				]
				// this.list.length && list.length < this.pageSize // loadstatus条件
				this.loadstatus = (this.list.length === 30) ? 'nomore' : 'loadmore'
				this.list = [...this.list, ...list]
				
				this.page++
				this.nodata = this.list.length === 0
			}, 1000)
		},
		viewReason() {
			this.show = true
			this.content = '退款原因退款原因退款原因退款原因'
		}
	}
}
</script>

<style lang="scss" scoped>
.cont {
	min-height: 100vh;
	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
}
</style>
